<template>
	<view><!-- class="page" -->
		<view class="header">
			<view v-if="title==='成功'" class="success">申请{{title}}<br>请在有效时间内{{type.substr(0,2)}}</view>
			<view v-else-if="title==='失败'" class="failed">申请{{title}}</view>
			<view v-else-if="title==='待处理'" class="todo">申请{{title}}</view>
			<view v-else class="invalid">申请{{title}}</view>
		</view>
		<table>
			<tr v-show="title==='失败'">
				<th>驳回原因</th>
				<td>经核查您近14天内途径高风险地区</td>
			</tr>
			<tr v-show="title==='失败'">
				<th>处理结果</th>
				<td>您需在校外集中隔离7天，7天后持核酸阴性证明方可入校</td>
			</tr>
			<tr v-show="title==='成功'|title==='已失效'">
				<th>有效开始时间</th>
				<td>{{start}}</td>
			</tr>
			<tr v-show="title==='成功'|title==='已失效'">
				<th>有效结束时间</th>
				<td>{{end}}</td>
			</tr>
			<tr>
				<th>申请人姓名</th>
				<td>{{name}}</td>
			</tr>
			<tr>
				<th>联系电话</th>
				<td>{{phone}}</td>
			</tr>
			<tr>
				<th>身份证</th>
				<td>{{idCard}}</td>
			</tr>
		</table>
			<button v-if="type==='入校申请'" type="primary" :disabled="buttonDiasbled" @tap="click">点击入校</button>
			<button v-if="type==='离校申请'" type="primary" :disabled="buttonDiasbled" @tap="click">点击离校</button>
	</view>
</template>

<script>
	import request from '@/utils/api.js'
	export default {
		name:"detail",
		props:{
			title:String,//结果状态标识，成功，失败，已失效，待处理
			start:String,
			name:String,
			idCard:String,
			phone:String,
			end:String,
			type:String,
			id:String
		},
		data() {
			return {
				style:'',
				titleName:this.title,
				idNumber:this.id
			};
		},
		methods: {
			click(e){
				let token =uni.getStorageSync('token')
				uni.request({
					url:'http://101.33.239.187:8080/api/1/application/in/state/'+this.idNumber,
					header:{
						Token: token
					},
					method:'POST',
					success: (resp) => {
						console.log('resp',resp);
						uni.navigateBack({
							delta:1
						});
					},
					fail: (err) => {
						console.log('err', err);
					}
				})
			}
		},
		computed:{
			buttonDiasbled(){
				if(this.titleName==='成功'){
					return false;
				}
				else{
					return true;
				}
			}
		}
	}
</script>

<style>
	.page{
		max-width: 1080px;
		overflow-x: hidden;
		padding: 0px;
		text-align: center;
		position: relative;
	}
	.header{
		margin:60px 10px;
		text-align: center;
		letter-spacing: 3px;
		font-size: 27px;
	}
	.success{
		color: rgb(48, 197, 43);
	}
	.failed{
		color: rgb(214, 31, 34);
	}
	.todo{
		color: rgb(85, 170, 255);
	}
	.invalid{
		color: rgb(233, 159, 94);
	}
	table{
		width:90%;
		margin:10vh auto;
		border-collapse:separate;
		border-spacing:10px 20px;
	}
	tr{
		padding-bottom: 5%;
	}
	th{
		width:100px;
		text-align: left
	}
	td{
		vertical-align:text-top;
		padding-left: 10%;
		text-align: left;
	}
</style>